<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function fun(){
   var id = document.getElementById("user");
   var ex=/^\w{5,12}$/;
   var v = document.getElementById("red");
  if(ex.test(id.value)){
       alert("合格");

        v.innerHTML="<b style=\"color:blue\">正确</b>";
       }
        else{
        alert("不合格");


        v.innerHTML="<b style=\"color:#ff0000\">不可以使用<b>";
        alert(v.innerText);
        }
        }

        function al(){
                var v = document.getElementsByName("ww");
        for(var i = 0;i<v.length;i++){
        v[i].checked=true;}

        }
        function no(){
        var v = document.getElementsByName("ww");
        for(var i = 0;i<v.length;i++){
        v[i].checked=false;
        }

        }

        function selected(){
        var v = document.getElementsByName("ww");

        for(var i = 0;i<v.length;i++){
        if(v[i].checked==true)
       v[i].checked=false ;
       else if(v[i].checked==false)
       v[i].checked=true ;
       }

        }
    </script>
</head>
<body>
用户名:<input id="user" input type="text"/>
<span style="color:red" id="red"> </span>
<button onclick="fun()">校验</button>

<input name="ww" type="checkbox" value="c++">c++
<input name="ww"  type="checkbox" value="java">java
<input  name="ww" type="checkbox" value="pythod">python
<button onclick="al()">全选</button>
<button onclick="no()">全不选</button>
<button onclick="selected()">反选</button>

</body>
</html>